<template>

	<u-navbar placeholder @leftClick="jumpPage('/pages/index/index')" title="添加用户"> </u-navbar>	


	<u--form labelPosition="left" :model="formState" :rules="rules" ref="loginform" class="form_state">


		<u-form-item prop="name" borderBottom>
			<up-input v-model="formState.name" placeholder="请输入姓名" class="input_item">
				<template #prefix>
					<text class="leftPrefix">姓名</text>
				</template>
			</up-input>
		</u-form-item>

		<u-form-item prop="mobile" borderBottom>
			<up-input v-model="formState.mobile" placeholder="收货人电话" class="input_item">
				<template #prefix>
					<text class="leftPrefix">收货人电话</text>
				</template>
			</up-input>
		</u-form-item>

		<u-form-item prop="mobile" borderBottom @tap="state.addressShow= true">
			<up-input  suffixIcon="arrow-right" readonly v-model="state.arae" placeholder="请选择" class="input_item">
				<template #prefix>
					<text class="leftPrefix">收货地址</text>
				</template>
			</up-input>
		</u-form-item>

		<u-form-item  borderBottom  >
			<up-input  v-model="formState.address" placeholder="请输入详细地址" class="input_item">
				<template #prefix>
					<text class="leftPrefix">详细地址</text>
				</template>
			</up-input>
		</u-form-item>


		<u-form-item prop="region_identity" borderBottom  >
			<up-input  v-model="formState.region_identity" placeholder="请输入地区标识" class="input_item">
				<template #prefix>
					<text class="leftPrefix">地区标识</text>
				</template>
			</up-input>
		</u-form-item>


		<u-form-item borderBottom>
			<view @click="submitForm" class="submit_btn">添加</view>
		</u-form-item>

	</u--form>
	
	
	 
	 <address-picker v-if="state.reqArea" :addressData="state.addressData"  :reqArea="state.reqArea" :show="state.addressShow" closeOnClickOverlay @confirm='confirmAddress' @cancel='state.addressShow=false'
	             @close='state.addressShow = false'  :type="3"></address-picker>

</template>

<script setup>
	import { jumpPage } from '@/common/hooks.js'
	import { regionListApi , addUserApi} from '@/common/apis.js'
	import { reactive, ref, computed, onMounted } from 'vue';
	import { useStore } from 'vuex';
	import { onLoad } from "@dcloudio/uni-app";
	const loginform = ref()
	const store = reactive(useStore())
	const state = reactive({
		addressShow: false,
		reqArea:"",
		arae:"",
		addressData:[]
	})
	const formState = reactive({
		name: "",
		region_identity:"",
		address: "",
		province_id:"",
		province_name:"",
		city_id:"",
		city_name:"",
		county_id:"",
		county_name:"",
	})
	

	
	const confirmAddress =(e) =>{
		formState.province_id = e.areaId[0]
		formState.city_id = e.areaId[1]
		formState.county_id = e.areaId[2]
		formState.province_name = e.value[0]
		formState.city_name = e.value[1]
		formState.county_name = e.value[2]
		state.arae =  e.value[0] + '/' + e.value[1] + '/' + e.value[2]
		state.addressShow = false
	}

	

	
	
	const rules = reactive({
		'mobile': [{
				required: true,
				message: '请输入手机号',
				trigger: ['blur'],
			},
			{
				// 自定义验证函数，见上说明
				validator: (rule, value, callback) => {
					return uni.$u.test.mobile(value);
				},
				message: '手机号码不正确',
				trigger: ['blur'],
			}
		],
		'name': [{
				type: 'string',
				required: true,
				message: '请填写姓名',
				trigger: ['blur', 'change']
			},
		
		],
		'region_identity': {
			type: 'string',
			required: true,
			message: '请输入地区标识',
			trigger: ['blur', 'change']
		},

	})



	const submitForm = () => {
		loginform.value.validate().then(async () => {
			let reqdata = formState
			
			const {data:res} = await addUserApi(reqdata)
			
			if (res.code == 200) {
				uni.showToast({
					title: '添加成功'
				})
				res.data.address_detail =res.data.province_name + res.data.city_name + res.data.county_name + res.data.address +res.data.region_identity
				jumpPage(`/pages/form/form?uid=${res.data.id}&mobile=${res.data.mobile}&address=${res.data.address_detail}&name=${res.data.name}`)
			}
			
			

		}).catch(errors => {
			console.log(errors);
		})
	}

	const	getRegionList  = async () =>{
		const {data:res} =await regionListApi()
		if (res.code == 200) {
			state.reqArea = res.data
			state.addressData= [res.data[0].name,res.data[0].children[0].name,res.data[0].children[0].children[0].name]
		}
	}


	onLoad((optios) => {
		getRegionList()
	})
</script>

<style lang='scss' scoped>
	page {
		background: #F8F9FC;
	}

	.form_state {
		padding: 0 20px;
	}

	.input_item {
		background: #fff;
		border: none;
		border-radius: 5px;
		height: 30px;
	}





	.submit_btn {
		background: $common-blue;
		color: #fff;
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		font-size: 16px;
		margin-top: 30px;
	}


	.leftPrefix {
		width: 80px;
		font-size: 14px;

	}

	.form_item {
		display: flex;
		background-color: #fff;
		height: 40px;
		align-items: center;
		padding-left: 10px;
		margin-top: 10px;
	}
</style>